// 底部组件
import React from 'react'

export default class Footer extends React.Component {
  render() {
    // 计算剩余的任务的数量
    const leftTasks = this.props.list.filter((item) => !item.done)
    const { type } = this.props
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>{leftTasks.length}</strong> 个任务未完成
        </span>
        <ul className="filters">
          <li>
            <a
              onClick={this.handleFilter.bind(this, 'all')}
              className={type === 'all' ? 'selected' : ''}
              href="#/"
            >
              全部
            </a>
          </li>
          <li>
            <a
              onClick={this.handleFilter.bind(this, 'active')}
              className={type === 'active' ? 'selected' : ''}
              href="#/active"
            >
              未完成
            </a>
          </li>
          <li>
            <a
              onClick={this.handleFilter.bind(this, 'completed')}
              className={type === 'completed' ? 'selected' : ''}
              href="#/completed"
            >
              已完成
            </a>
          </li>
        </ul>
        <button className="clear-completed" onClick={this.clearTask}>
          清除已完成任务
        </button>
      </footer>
    )
  }
  // 控制筛选条件的切换
  handleFilter = (type) => {
    // 需要把最新选中的条件传递给父组件
    this.props.handleFilter(type)
  }
  // 清除已经完成的任务
  clearTask = () => {
    this.props.clearTask()
  }
}
